<template>
  <el-dialog
    :title="title"
    :visible.sync="projectVisible"
    append-to-body
    width="1000px"
    :close-on-click-modal="false"
  >
    <template>
      <el-table :data="projects" style="width: 100%">
        <el-table-column prop="index" label="序号" align="center" width="60">
        </el-table-column>
        <el-table-column
          prop="extractItem"
          label="项目名称"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="state" label="状态" width="120">
        </el-table-column>
        <el-table-column
          prop="extractApproveStatus"
          label="完成情况"
          width="120"
        >
          <template slot-scope="scope">
            {{ scope.row.extractApproveStatus == 7 ? "进行中" : "已完成" }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="opentablelist(scope.row)"
            >
              查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <ResultTable :visible.sync="tableVisible" :form="form" />
    <div style="float: right">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.pageNum"
        :page-sizes="[10, 30, 50]"
        :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
      >
      </el-pagination>
    </div>
  </el-dialog>
</template>

<script>
import ResultTable from "./resultTable";
import { listRandom } from "@/api/unit/random";
export default {
  components: {
    ResultTable,
  },
  props: ["visible", "projects", "title", "pagination"],
  computed: {
    projectVisible: {
      get() {
        return this.visible;
      },
      set(value) {
        this.$emit("update:visible", value);
      },
    },
    page: {
        get() {
            return this.pagination;
        },
        set(value) {
            this.$emit("update:pagination", value);
        }
    }
  },
  data() {
    return {
      tableVisible: false,
      form: {},
    };
  },
  methods: {
    opentablelist(row) {
      listRandom({
        randomUnitId: row.unitId,
        extractId: row.extractId,
        randomBan: 3,
      }).then((res) => {
        row.randomUnitName = res.rows[0].randomUnitName;
        this.tableVisible = true;
        this.form = row;
      });
    },
    handleSizeChange(size) {
        const newPage = {...this.page, pageSize: size};
        this.page = newPage;
        this.$emit("refresh");
    },
    handleCurrentChange(current) {
        const newPage = {...this.page, pageNum: current};
        this.page = newPage;
        this.$emit("refresh");
    }
  },
};
</script>

<style scoped>
</style>